<template>
  <div class="bigContainer">
    <ul>
      <li
        v-for="(value, index) in moveList"
        :key="index"
        @click="goToDetail(value)"
      >
        <div class="left">
          <img :src="value.img | formatUrl" alt="" />
        </div>
        <div class="center">
          <p class="title">{{ value.nm }}</p>
          <p class="score">
            观众评分<span>{{ value.sc }}</span>
          </p>
          <p class="super">主演：{{ value.star }}</p>
          <p class="arrange">{{ value.showInfo }}</p>
        </div>
        <div class="right">
          <div class="buy" :class="{}">
            <span v-if="value.preShow" class="blue">{{ msg }}</span>
            <span v-if="!value.preShow" class="blue">{{ msgSail }}</span>
          </div>
        </div>
      </li>
    </ul>
    <p
      v-if="moveList.length >= count && moveList.length"
      style="text-align: center"
    >
      我是有底线的
    </p>
  </div>
</template>
<script>
import { moviesApi, moreApi } from "@/utils/api";
export default {
  data() {
    return {
      ids: [],
      count: 0,
      moveList: [],
      show: null,
      msg: "预售",
      msgSail: "购票",
      startIndex: 0,
      size: 6,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await moviesApi();
      this.moveList = res.result;
      // 拿到所有的电影的id
      this.ids = res.ids;
      // 拿到所有的电影条数
      this.count = res.count;
      // 下一次截取的时候，从哪个坐标开始
      this.startIndex = res.result.length;

      // 子组件请求完毕之后去触发父组件的事件
      await this.$nextTick();
      this.$emit("addbs");
    },
    async getMore() {
      // console.log("getMore");
      // 去请求加载更多的接口
      const arr = this.ids.slice(this.startIndex, this.startIndex + this.size);
      // console.log(arr);
      const ids = arr.join(",");

      const res = await moreApi({ ids: ids });
      this.moveList = [...this.moveList, ...res.result];
      this.startIndex += this.size;

      await this.$nextTick();
      this.$emit("heightupdate", res.result.length < this.size);
    },
    goToDetail(value) {
      // console.log(value);
      this.$router.push("/detail/" + value.movieid);
    },
  },
  filters: {
    formatUrl(val) {
      return val.split("/w.h").join("/");
    },
  },
};
</script>
<style lang="less" scoped>
.red {
  background-color: red;
}
.blue {
  background-color: cyan;
}
.bigContainer {
  width: 100%;
  background-color: white;
  padding: 10px;
  margin-top: 10px;
  li {
    display: flex;
    flex: 1;
    .left {
      width: 64px;
      height: 114px;
      margin-right: 10px;
      img {
        width: 64px;
        height: 90px;
      }
    }
    .center {
      height: 90px;
      width: 180px;
      .title {
        width: 100%;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .score {
        font-size: 14px;
        margin-top: 7px;
        span {
          color: orange;
          padding-left: 7px;
          font-weight: bold;
        }
      }
      .super {
        font-size: 14px;
        margin-top: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .arrange {
        font-size: 14px;
        margin-top: 7px;
      }
    }
    .right {
      //   width: 40px;
      height: 100%;
      padding-left: 15px;
      padding-top: 20px;
      div {
        text-align: center;
        line-height: 30px;
        font-size: 18px;
        width: 50px;
        height: 30px;
        border: 1px solid black;
        border-radius: 40px;
      }
    }
  }
}
</style>
